<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,maximum-scale=1.0" />
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <link rel="stylesheet" type="text/css" href="css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/public.js" type="text/javascript" charset="utf-8"></script>
    <title>发票抬头-编辑</title>
</head>
<body>
	<div id="invoiceEdit">
		<div class="editCon">
			<div class="editTitle">
				<span class="title">发票抬头</span>
				<span class="name">个人</span>
			</div>
			<div class="editlist">
				<span class="listTitle">发票抬头类型</span>
				<div class="listTab">
					<span class="tabOn">个人</span>
					<span>企业</span>
				</div>
			</div>
			<div class="editChange">
				<div class="changeList personal">
					<div class="list">
						<span class="listTitle">发票类型</span>
						<span class="listName">增值税普通发票</span>
					</div>
					
				</div>
				<div class="changeList enterprise" style="display: none;">
					<div class="list">
						<span class="listTitle">发票类型</span>
						<span class="listName">增值税普通发票</span>
					</div>
					<div class="list">
						<span class="listTitle">税务登记证号</span>
						<input type="text" name="swdjzh" class="swdj" value="" placeholder="请填写您纳税登记证上的编号"/>
					</div>
					<div class="list">
						<span class="listTitle">注册场所地址</span>
						<input type="text" name="zccsdz" class="zccs" value="" placeholder="请填写您营业执照上的注册地址"/>
					</div>
					<div class="list">
						<span class="listTitle">注册固定电话</span>
						<input type="text" name="zcgddh" class="zcgddh" value="" placeholder="请填写您公司有效的联系电话"/>
					</div>
					<div class="list">
						<span class="listTitle">开户银行</span>
						<input type="text" name="khyh" class="khyh" value="" placeholder="请填写您开户许可证上的开户银行"/>
					</div>
					<div class="list">
						<span class="listTitle">银行账号</span>
						<input type="text" name="yhzh" class="yhzh" value="" placeholder="请填写您开户许可证上的银行账号"/>
					</div>
				</div>
			</div>
			<a href="javascript:void(0);" class="submitBtn">保存</a>
		</div>
	</div>
	<div class="mask"></div>
	<div class="enterCon">
		<div class="conlist">
			企业增值税普通发票
		</div>
		<div class="conlist">
			增值税专发票
		</div>
		<div class="conlist">
			组织增值税普通发票
		</div>
		<span class="cancel">取消</span>
	</div>
<script type="text/javascript">
	//切换tab
	$('.listTab span').on('click',function(){
		var index=$(this).index()
		var html=$(this).html()
		$('.editTitle .name').html(html)
		$(this).addClass('tabOn').siblings().removeClass('tabOn')
		$('.editChange .changeList').eq(index).show().siblings().hide()
	})
	//点击弹出发票类型选项
	$('.enterprise .listName').on('click',function(){
		$('.enterCon').animate({
			'height':'5.466rem'
		},200);
		$('.mask').animate({
			'height':'100%'
		},200).show()
		//点击遮罩，取消
		$('.mask , .cancel').on('click',function(){
			$('.enterCon').animate({
				'height':'0'
			},200);
			$(this).animate({
				'height':'0'
			},200).hide()
		})
	})
	//选中发票类型，并传回值
	$('.enterCon .conlist').on('click',function(){
		var html1=$(this).html()
		$('.enterprise .listName').html(html1);
		$('.enterCon').animate({
			'height':'0'
		},200);
		$('.mask').animate({
			'height':'0'
		},200).hide()
	})
</script>
</body>
</html>
